<html>
  <head>
    {% include "headers.html" %}
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALWSj8hvKIStgDmyBfDsJdBQr2jk3fpiFHPc9n0th4iVYb37hfRQobiC8kM6Xk0a0g6mhfbkHN6QmCQ
&sensor=false" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
    
      // Location related properties
      $("#locopts").val("{{ profile.entity.locopts }}");
      
      var chg_lopt = function() { 
        var lopt = $("#locopts").val(); 
        if (lopt == "manual") { 
          $("#locinfo").html("<a id='show-map' href='/profile' onClick='return false;'>&#8680 Show Map</a>"); 
          $("#lochelp").text("Please set your location by clicking the 'Show map' link " +
          "before hitting 'Save', otherwise your location will be calculated from your IP address anyways.")
          $("#show-map").click( function() {
            $("#lochelp").html("<div id='map-canvas' style='width: 650px; height: 550px; left: 20px;'></div>" + 
              "<p> After you hit 'Save' the area shown in this map will be set as your location. If you " +
              "use a very large area, random suggestions could be very far away from you. </p>");
            if (GBrowserIsCompatible()) {
              var map = new GMap2(document.getElementById("map-canvas"));
              if (google.loader.ClientLocation){
                map.setCenter(new GLatLng(google.loader.ClientLocation.latitude, 
                  google.loader.ClientLocation.longitude), 12);
              } else { map.setCenter(new GLatLng(37.4419, -122.1419), 13); }
              map.setUIToDefault();
              $("#locinfo").empty();
            }
          });
        } 
        else if (lopt == "auto") { 
          $("#locinfo").html("<a id='test-ip' href='/profile' onclick='return false;'>&#8680 Test It</a>"); 
          $("#lochelp").text("Allow us to obtain your location from your IP address. Beware that this " +
            "method doesn't always work and is not very accurate.");
         
          $("#test-ip").click( function() {
            if (google.loader.ClientLocation)
            {
              $("#lochelp").text("Your location is: " + google.loader.ClientLocation.address.city +
                ", " + google.loader.ClientLocation.address.region + ", " + 
                google.loader.ClientLocation.address.country);
            } else {
              $("#lochelp").text("Sorry, retrieving your location by IP Address failed.");
            }
          });
        } 
        else { $("#locinfo").empty(); $("#lochelp").text("")
          $("#lochelp").text("With location settings disabled, you will be missing out on random " +
            "suggestions regarding places to visit and upcoming events in your region.");
        } 
      };

      chg_lopt();
      $("#locopts").change(chg_lopt);
      
    });
    </script>
    
  </head>
  <body>
    {% include "menu.html" %}
    
    <div class="content">
    
      {% if profile.user %}
        <form action="/profile" method="post">
        <p><strong>Customize your Profile</strong></p>
        <p>
        Please fill your Profile with information using this form. 
        No field is required, but the more fields you complete,
        the better the quality of our suggestions will be. </p> <p>
        Some Profile options also control the way your information is displayed to you
        and to other members of this site. By default, none of your information
        is shared with any other user. </p>
        </p>
        
        <div class="section-header" >Location Information</div>
        <p>Your location information is important because it helps us in providing 
        random suggestions about current events and places of interest that are 
        actually close to you.</p>
        <ul>
          <li>Location Options: <select name="locopts" id="locopts">
            <option value="disabled">Disable location related suggestions</option>
            <option value="auto">Automatically retrieve location from my IP address</option>
            <option value="manual">Select my location manually on the map</option>
          </select>
          <span id="locinfo"></span>
          </li>
        </ul>
        <div id="lochelp" class="inline-hint"></div>
        <hr/>
        When you are done tweaking your Profile, click this to save your changes:
        <input style="width: 180px" type="submit" value="Save Profile" />
        </form>
        
      {% else %}
        <p>You're not logged in (yet), and thus I can't locate your profile. <br/>
        Try logging in first, then come back to this page when you're done. </p>
      {% endif %}
      
    </div>
    {% include "footers.html" %}
  </body>
</html>
